import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'

/** 文章卡片属性 */
export interface ArticleCardProperty {
  // 布局类型：单列大图 | 单列小图 | 双列
  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
  // 文章字段
  fields: {
    // 文章标题
    title: ArticleCardFieldProperty
    // 文章作者
    author: ArticleCardFieldProperty
    // 文章简介
    introduction: ArticleCardFieldProperty
    // 浏览量
    browseCount: ArticleCardFieldProperty
  }
  // 角标
  badge: {
    // 是否显示
    show: boolean
    // 角标图片
    imgUrl: string
  }
  // 上圆角
  borderRadiusTop: number
  // 下圆角
  borderRadiusBottom: number
  // 间距
  space: number
  // 文章编号列表
  articleIds: number[]
  // 组件样式
  style: ComponentStyle
}

// 文章字段
export interface ArticleCardFieldProperty {
  // 是否显示
  show: boolean
  // 颜色
  color: string
}

// 定义组件
export const component = {
  id: 'ArticleCard',
  name: '文章卡片',
  icon: 'fluent:text-column-two-left-24-filled',
  property: {
    layoutType: 'oneColBigImg',
    fields: {
      title: { show: true, color: '#000' },
      author: { show: true, color: '#666' },
      introduction: { show: true, color: '#999' },
      browseCount: { show: true, color: '#999' }
    },
    badge: { show: false, imgUrl: '' },
    borderRadiusTop: 8,
    borderRadiusBottom: 8,
    space: 8,
    articleIds: [],
    style: {
      bgType: 'color',
      bgColor: '',
      marginLeft: 8,
      marginRight: 8,
      marginBottom: 8
    } as ComponentStyle
  }
} as DiyComponent<ArticleCardProperty>
